@charset "UTF-8";

html, body {
	background-color: #152349;
	color: white !important;
}

.panel-backgroud {
	background: #162a5f;
}

.graph-container {
	position: relative;
	/* required Y axis stuff, Graph Holder's left and bottom sides to be positions properly */
	display: inline-block;
	/* display: table may also work.. */
	padding: 0;
	/* let the bars position themselves */
	list-style: none;
	/* we don't want to see any default <ul> markers */
	margin: 40px 0 40px 40px;
	font-size: 0.6em;
	background-repeat: no-repeat;
	background-position: 0 -2.5em;
}

.graph-container:before {
	position: absolute;
	content: "";
	bottom: 0;
	left: -1.25em;
	width: 12em;
	height: 2.5em;
	background-color: rgba(156, 150, 150, 0.8);
	transform: skew(-45deg);
}

.graph-container>li {
	float: left;
	position: relative;
}

.graph-container>li:first-child {
	margin-left: 1em;
}

.bar-wrapper {
	overflow: hidden;
}

.bar-container {
	position: relative;
	margin-top: 2.5em;
	width: 12.5em;
}

.bar-container:before {
	content: "";
	position: absolute;
	z-index: 3;
	bottom: 0;
	right: 5em;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 2.5em 2.5em;
	border-color: transparent transparent rgba(183, 183, 183, 0.1);
}

.bar-background {
	width: 5em !important;
	background-color: rgba(160, 160, 160, 0.2);
	height: 100%;
	position: absolute;
	top: -2.5em;
	left: 2.5em;
	z-index: 1;
}

.bar-background:before {
	background-color: rgba(160, 160, 160, .2);
	bottom: -2.5em;
	right: 1.25em;
	width: 10em;
	height: 2.5em;
	transform: skew(-45deg);
	content: "";
	position: absolute;
}

.bar-background:after {
	background-color: rgba(160, 160, 160, .05);
	top: 1.25em;
	right: 10em;
	width: 2.5em;
	height: 100%;
	transform: skew(0deg, -45deg);
	content: "";
	position: absolute;
}

.bar-inner {
	position: absolute;
	text-align: center;
	width: 5em !important;
	background-color: rgba(3, 169, 244, 0.2);
	transition: height 0s ease-out, bottom 0s ease-out !important;
	bottom: 0em !important;
	z-index: 2;
	top: auto;
	color: white !important;
}

.bar-inner:after {
	background-color: rgba(3, 169, 244, 0.5) !important;
}

.bar-foreground:before, .bar-foreground:after, .bar-inner:before,
	.bar-inner:after {
	content: "";
	position: absolute;
}

.bar-foreground:before, .bar-inner:before {
	top: -1.25em;
	right: -2.5em;
	width: 2.5em;
	height: 100%;
	background-color: rgba(160, 160, 160, 0.27);
	transform: skew(0deg, -45deg);
}

.bar-foreground:after, .bar-inner:after {
	top: -2.5em;
	right: -1.25em;
	width: 100%;
	height: 2.5em;
	background-color: rgba(160, 160, 160, 0.35);
	transform: skew(-45deg);
}

.bar-inner:before {
	background-color: rgba(3, 169, 244, 0.2);
}

.graph-container:after {
	position: absolute;
	content: "";
	top: 1.25em;
	left: -2.5em;
	width: 2.5em;
	background-color: rgba(5, 123, 5, 0.0) !important;
	transform: skew(0deg, -45deg);
}

.bar-foreground, .bar-inner {
	width: 5em !important;
}

.bar-foreground {
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(160, 160, 160, 0.1) !important;
}
/*主div区域*/
.my-main {
	margin-left: 1%;
	margin-bottom: 1%;
	float: left;
	width: 32%;
	background-color: #162a5f;
}
/*模型高度*/
.graph-container .bar-container, .graph-container:after,
	.graph-container>li:last-child {
	height: 20em !important;
}

.flot-div {
	float: left;
}

.dev-info {
	color: white;
	margin: 40px 0 0 10px;
	border: 1px solid white;
	padding: 1em;
}